import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式

// 封装中间件
export default {
  install (Vue) {
    Vue.directive('focus', {
      inserted (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          if (el.querySelector('input')) {
            el.querySelector('input').focus()
          }
          if (el.querySelector('textarea')) {
            el.querySelector('textarea').focus()
          }
        }
      },

      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          if (el.querySelector('input')) {
            el.querySelector('input').focus()
          }
          if (el.querySelector('textarea')) {
            el.querySelector('textarea').focus()
          }
        }
      }
    })

    Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
      const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
      highlight.forEach((block) => {
        hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
      })
    })
  }
}
